<template>
  <div class="headerback_box">
    <!-- 第一种返回 -->
    <div class="headerbackone" v-show="displayshow" @click="backclick">
      <span class="icon_number iconfont">&#xe6f0;</span>
    </div>
    <!-- 第二种返回 -->
    <!--:style="opacityStyle"动态绑定一个css样式，为了有一个渐隐渐现效果  -->
    <router-link to="/" tag="div" class="headerbacktwo" v-show="!displayshow" :style="opacityStyle">
      <span class="icon_numbertwo iconfont">&#xe6f0;</span>
      <span class="headerbacktwotitle">这是标题哈</span>
    </router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      displayshow: true,
      //   为了一个渐隐渐现的效果
      opacityStyle: {
        opacity: 0
      }
    };
  },

  //   点击事件定义方法：
  methods: {
    backclick() {
      this.$router.replace("/");
    },
    handeleScroll() {
      console.log("顶部的高：" + document.documentElement.scrollTop);
      //   思路：现在滑动距离有了，就是当滑动到42px时候，你返回消失，显示标题
      // 先存储
      console.log("scorll");
      const topjuli = document.documentElement.scrollTop;
      //   开始判断到哪开始显示隐藏
      if (topjuli > 40) {
        //   let和const是es6的语法
        //  let 声明的变量只在 let 命令所在的代码块内有效。
        // const 声明一个只读的常量，一旦声明，常量的值就不能改变。
        // 思路当你的滑动距离/80也就是你的滑动正好在80px位置时候，他80/80=1，所以使用三目运算他 opcity>1时候，他是1 ,opcity<1则是后面的运算符也就是opcity，而opcity上面的data声明过是0.结果就是除以80要是大于1则opcty的透明为1，否则是0
        let opacity = topjuli / 80;
        opacity = opacity > 1 ? 1 : opacity;
        this.opacityStyle = {
          opacity
        };
        this.displayshow = false;
      } else {
        this.displayshow = true;
      }
    }
  },
  //   使用了keepalve,所以页面只展示了一次，要想跳转页面再次发送请求，那么他这个页面只要展示，activated就会被执行。
  mounted() {
    // activated(){
    // 用addEventListener可以让多个事件按顺序都实现
    // addEventListener绑定一个scroll事件。一旦这个事件被执行，那么this.handeleScroll也会被执行
    window.addEventListener("scroll", this.handeleScroll);
     console.log("mounted")
  },
  //   解绑事件deactivated
  // 为何要解绑事件，当你上面的代码只能在本组件中使用。但是 window.addEventListener 他让其他组件也产生了影响。所以我们要做一个接触绑定
  unmounted() {
    // deactivated(){
    // 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。
    window.removeEventListener("scroll", this.handeleScroll);
    console.log("unmounted")
  }
};
</script>

<style lang="stylus" scoped>
.headerback_box {
  .headerbackone {
    width: 0.6rem;
    height: 0.6rem;
    line-height: 0.6rem;
    position: absolute;
    top: 0.2rem;
    left: 0.32rem;
    border-radius: 50%;
    text-align: center;
    background: rgba(0, 0, 0, 0.8);

    .icon_number {
      font-size: 0.5rem;
      color: #fff;
    }
  }

  .headerbacktwo {
    width: 100%;
    height: 0.8rem;
    line-height: 0.8rem;
    background: aqua;
    text-align: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;

    .icon_numbertwo {
      float: left;
      font-size: 0.5rem;
      color: #fff;
      margin-left: 0.32rem;
    }

    .headerbacktwotitle {
      color: #fff;
      font-size: 0.5rem;
    }
  }
}
</style>